<template>
    <div class="certificate-container" :class="{ 'is-mobile': $isMobile }">
        <div class="certificate-header">
            <div class="line1">
                <span class="bolder">资质查询</span>
                <span class="txt">可输入企业全称、证书编号、身份证号任意方式进行查询！</span>
            </div>

            <div class="line2">

                <input type="text" class="input" v-model="search" placeholder="请输入企业名称 / 证书编号 / 身份证号" autofocus>
                <div class="search" @click="handleSearch">查询</div>
            </div>
        </div>
        <div class="certificate-content">
            <div class="content-header ">
                <div>查询内容</div>
                <div class="download" v-if="!empty" @click="handleDownload">
                    <img src="../../../assets/xiazai.png" alt="" class="icon">
                    下载证书
                </div>
            </div>

            <template v-if="!empty">
                <div class="content-datas">
                    <enterprise-certificates v-for="item in enterprise" :key="item.id"
                        :item="item"></enterprise-certificates>

                    <person-certificates v-for="item in person" :key="item.id" :item="item"></person-certificates>
                </div>
            </template>

            <template v-else>
                <el-empty :image-size="160" description=" "></el-empty>
            </template>


        </div>
    </div>
</template>

<script>
import domtoimage from 'dom-to-image';
import enterpriseCertificates from "./components/enterprise-certificate.vue";
import personCertificates from "./components/person-certificate.vue"

export default {
    components: {
        enterpriseCertificates,
        personCertificates
    },
    data() {
        return {
            loading: false,
            search: "",
            datas: "",
            enterprise: [],
            person: []
        }
    },
    computed: {
        empty() {
            return this.enterprise.length === 0 && this.person.length === 0
        }
    },
    mounted() {
        if (this.$route.query.search) {
            this.search = this.$route.query.search;
        }
        this.handleSearch();
    },
    methods: {


        async getPersonData() {
            const { data: { sorts } } = await this.$fetch.get(`/api/person-certificates/list`, { search: this.search });
            this.person = sorts;
        },

        async getEnterpriseData() {
            const { data: { sorts } } = await this.$fetch.get(`/api/enterprise-certificates/list`, {
                search: this.search
            });
            this.enterprise = sorts;
            console.log("企业数据", this.enterprise)
        },



        async handleSearch() {
            if (!this.search) {
                return;
            }
            const loading = this.$loading();
            await this.getEnterpriseData();
            await this.getPersonData();
            loading.close();
        },

        handleDownload() {
            const domList = document.querySelectorAll(".certificate-item");
            let self = this;
            domList.forEach((node, index) => {
                domtoimage.toJpeg(node, { quality: 0.95 })
                    .then(function (dataUrl) {
                        let link = document.createElement('a');
                        link.download = `${self.search}.jpeg`;
                        link.href = dataUrl;

                        link.click();
                        link.remove();
                    })
                    .catch(function (error) {
                        console.error('Error converting DOM node to JPEG:', error);
                    });
            });
        }
    }
}
</script>

<style lang="less" scoped>
.certificate-container {
    padding-left: 60px;
    padding-right: 29px;
    padding-bottom: 25px;
    padding-top: 25px;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
}

.certificate-header {
    padding: 45px 100px;
    background: #F2F7FF;

    .line1 {
        margin-bottom: 40px;

        .bolder {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 30px;
            color: #3560AB;
            line-height: 42px;
            text-align: left;
            font-style: normal;
        }

        .txt {
            margin-left: 22px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 20px;
            color: #3560AB;
            line-height: 28px;
            text-align: left;
            font-style: normal;
        }
    }

    .line2 {
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #3560AB;
        height: 62px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;


        .input {
            flex: 1;
            outline: none;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            padding: 0 40px;
            border: none;
        }

        .search {
            width: 140px;
            background: linear-gradient(rgba(79, 140, 247, 1), rgba(53, 96, 171, 1));
            font-size: 20px;
            color: #FFFFFF;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}



.certificate-content {
    margin-top: 25px;
    margin-bottom: 25px;

    .content-header {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 24px;
        color: #333333;
        line-height: 33px;
        text-align: left;
        font-style: normal;
        display: flex;
        justify-content: space-between;
        margin-bottom: 25px;

        .download {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #3560AB;
            line-height: 22px;
            text-align: center;
            font-style: normal;
            cursor: pointer;

            .icon {
                margin-left: 4px;
            }
        }
    }

    .content-datas {
        min-height: 608px;
    }
}

.certificate-container.is-mobile {
    padding: 0;
    padding-left: 10px;
    margin: 0;
    margin-top: 10px;

    .certificate-content {
        margin-top: 10px;
        margin-bottom: 10px;

        .content-header {
            margin-bottom: 10px;

        }
    }

    .certificate-header {
        padding: 10px;
        margin-bottom: 10px;

        .line1 {
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;

            .txt {
                font-size: 16px;
                margin-left: 0;
                margin-top: 10px;
            }
        }

        .line2 {
            height: 42px;
            display: flex;
            flex-direction: row;

            .input {
                padding: 0 10px;
                flex: 1;
            }

            .search {
                font-size: 14px;
                padding-left: 10px;
                padding-right: 10px;
                width: fit-content;
            }
        }
    }

    .content-datas {
        min-height: fit-content;
    }



}
</style>